ProgressRing.render - Code Metrics - Inspection of "Bump snyk from 1.323.0 to 1.323.1" - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — dev ( 689b8d...6e5644 )

unknown

created 2020-05-20 14:10 UTC

ProgressRing.render A

↳ Parent: ProgressRing

Complexity

Conditions

Size

Total Lines	33
Code Lines	30

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	2
eloc	30
dl	0
loc	33
rs	9.16
c	0
b	0
f	0

import React from "react";

interface ProgressRingProps {
  radius: number;
  stroke: number;
  progress: number;
  strokeColor: string;
  max: number;
}

interface ProgressRingState {
  normalizedRadius: number;
  circumference: number;
}

class ProgressRing extends React.Component<
  ProgressRingProps,
  ProgressRingState
> {
  public constructor(props: ProgressRingProps) {
    super(props);

    const { radius, stroke } = this.props;

    this.state = {
      normalizedRadius: radius - stroke * 2,
      circumference: (radius - stroke * 2) * (2 * Math.PI),
    };
  }

  public render(): React.ReactElement {
    const { radius, stroke, progress, strokeColor, max } = this.props;
    const { normalizedRadius, circumference } = this.state;

    let strokeDashoffset = circumference - (progress / max) * circumference;
    if (strokeDashoffset < 0) {
      strokeDashoffset = 0;
    }

    return (
      <svg height={radius * 2} width={radius * 2}>
        <circle
          stroke="grey"
          fill="transparent"
          strokeWidth={stroke}
          strokeDasharray={`${circumference} ${circumference}`}
          style={{ strokeDashoffset: 0 }}
          r={normalizedRadius}
          cx={radius}
          cy={radius}
        />
        <circle
          stroke={strokeColor}
          fill="transparent"
          strokeWidth={stroke}
          strokeDasharray={`${circumference} ${circumference}`}
          style={{ strokeDashoffset }}
          r={normalizedRadius}
          cx={radius}
          cy={radius}
        />
      </svg>
    );
  }
}

export default ProgressRing;


1			import React from "react";
2
3			interface ProgressRingProps {
4			radius: number;
5			stroke: number;
6			progress: number;
7			strokeColor: string;
8			max: number;
9			}
10
11			interface ProgressRingState {
12			normalizedRadius: number;
13			circumference: number;
14			}
15
16			class ProgressRing extends React.Component<
17			ProgressRingProps,
18			ProgressRingState
19			> {
20			public constructor(props: ProgressRingProps) {
21			super(props);
22
23			const { radius, stroke } = this.props;
24
25			this.state = {
26			normalizedRadius: radius - stroke * 2,
27			circumference: (radius - stroke * 2) * (2 * Math.PI),
28			};
29			}
30
31			public render(): React.ReactElement {
32			const { radius, stroke, progress, strokeColor, max } = this.props;
33			const { normalizedRadius, circumference } = this.state;
34
35			let strokeDashoffset = circumference - (progress / max) * circumference;
36			if (strokeDashoffset < 0) {
37			strokeDashoffset = 0;
38			}
39
40			return (
41			<svg height={radius * 2} width={radius * 2}>
42			<circle
43			stroke="grey"
44			fill="transparent"
45			strokeWidth={stroke}
46			strokeDasharray={`${circumference} ${circumference}`}
47			style={{ strokeDashoffset: 0 }}
48			r={normalizedRadius}
49			cx={radius}
50			cy={radius}
51			/>
52			<circle
53			stroke={strokeColor}
54			fill="transparent"
55			strokeWidth={stroke}
56			strokeDasharray={`${circumference} ${circumference}`}
57			style={{ strokeDashoffset }}
58			r={normalizedRadius}
59			cx={radius}
60			cy={radius}
61			/>
62			</svg>
63			);
64			}
65			}
66
67			export default ProgressRing;
68

GCTC-NTGC / TalentCloud

Push — dev ( 689b8d...6e5644 )

ProgressRing.render A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like